<template>
    <div id="app">
        <router-view />
        <img v-if="musicPlaying"
             class="music"
             @click="musicPause"
             src="./assets/music.png">
        <img v-else
             @click="musicRestart"
             class="music"
             src="./assets/music-no.png">
    </div>
</template>
<script>
export default {
    data() {
        return {
            music: null,
            musicPlaying: true
        };
    },
    methods: {
        musicPause() {
            this.music.pause();
            this.musicPlaying = false;
        },
        musicRestart() {
            this.music.play();
            this.musicPlaying = true;
        }
    },
    created() {
        this.music = document.querySelector("#bg-music");
    }
};
</script>
<style lang="scss">
#app {
    width: 6.4rem;
    height: 100%;
    overflow: hidden;
    position: relative;
    font-family: PingFangSC-Regular, sans-serif, Arial;
    background: #fff;
    .music {
        position: absolute;
        top: 0.2rem;
        right: 0.2rem;
        width: 0.65rem;
    }
}
</style>
